<template>

  <div class="box">
    <myheader></myheader>
    <div class="center">
      <div class="ico">
        <svg class="icon" aria-hidden="true">
          <use xlink:href="#icon-wupinshenqing"></use>
        </svg>
      </div>
      <p class="tips">按自己的职业查找相应的简历模版</p>
      <div class="search">
        <i class="iconfont">&#xe64a;</i>
        <input type="text" placeholder="输入职业关键词">
      </div>
      <div class="ul-list" >
        <p class="tips">我们精心挑选一批优秀的简历供您参考</p>
        <div> {{$t('index.imgList')}}</div>
        <div> {{$t('index.templateList').list}}</div>
          <!-- <div class="main">
            <swiper :options="swiperOption">
              <swiper-slide class="list" v-for="(item,index) in listData.data.resumes" @click="changeCv(item._id)" :key="`resume${index}`">
                <div class="pic">
                  <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-daibanshixiang"></use>
                  </svg>
                </div>
                <p>{{item.name}}</p>
                <i class="iconfont jl_icon-pullright"></i>
              </swiper-slide>
              <div class="swiper-pagination" slot="pagination"></div>
            </swiper>
          </div> -->
      </div>
    </div>
    <myfooter></myfooter>
  </div>
</template>`
<script>
import { swiper, swiperSlide } from 'vue-awesome-swiper'

import {getList,createResume,changeDefaultId} from 'api';
export default {
  data() {
    return {
      listData:null,
        swiperOption: {
            spaceBetween:20,//间距
            slidesOffsetBefore:20,//离左边距离
            slidesPerView:'auto',//slide宽度自定义
            pagination: '.swiper-pagination',
            paginationClickable: true,
            autoplay: 4000,
            autoplayDisableOnInteraction: false,
            loop: false,

        },


    }
  },
  computed:{

  },
  mounted() {
      // this.getList();
  },
  methods: {
      // async getList(){
      //     var result = await this.$promise.post(getList);
      //     if(result){
      //         this.listData = result;
      //     }
      // },

  }
}
</script>

<style lang="scss" scoped>
  .box{
    position: fixed;
    left: 0;
    top: 0;
    right:0;
    bottom: 0;
    background-color: #03223d;
    text-align: center;
    .center{
      position: fixed;
      width: 100%;
      left: 0;
      top:50%;
      margin-top: -270px;
    }

  }
  .ul-list{
    color:#666;
    margin-top: 60px;
    .main{
      margin-top: 20px;
      padding-bottom: 20px;
      .list{
        cursor: pointer;
        display: inline-block;
        padding:20px 10px;
        width: 160px;
        border: #f0f0f0 1px solid;
        background-color: #f0f0f0;
        border-radius:5px;
        position: relative;
        text-align: center;
        p{
          overflow: hidden;/*超出部分隐藏*/
          white-space: nowrap;/*不换行*/
          text-overflow:ellipsis;/*超出部分文字以...显示*/
        }
        .pic{
          display: block;
          color:#ccc;
          text-align: center;
          .icon{
            font-size: 80px;
          }
          img{
            width: 100px;
          }
        }
        i{
          display: block;
          font-size: 20px;
          color:#ccc;
        }
      }
      .list:hover{
        background-color: #0568c5;
        border:#0568c5 1px solid;
        p{
          color:#fff;
        }
        i{
          color:#fff;
        }
      }
    }

  }
  .search{
    margin-top: 10px;
    position: relative;
    background-color:rgba(255,255,255,.1);
    border:rgba(255,255,255,.2) 1px solid;
    display: inline-block;
    width: 80%;
    max-width: 600px;
    height: 40px;
    line-height: 40px;
    border-radius:20px;
    input{
      display:inline-block;
      width: 100%;
      text-align: center;
      background: none;
      height: 40px;
      color: #fff;
      font-size: 14px;
    }
    input::-webkit-input-placeholder{
      color:rgba(255,255,255,.3);
    }
    input::-moz-placeholder{   /* Mozilla Firefox 19+ */
      color:rgba(255,255,255,.3);
    }
    input:-moz-placeholder{    /* Mozilla Firefox 4 to 18 */
      color:rgba(255,255,255,.3);
    }
    input:-ms-input-placeholder{  /* Internet Explorer 10-11 */
      color:rgba(255,255,255,.3);
    }
    .iconfont{
      position: absolute;
      left: 20px;
      top: 0;
      color:rgba(255,255,255,.3);
      font-size: 24px;
    }

  }
  .search:hover{
    border:rgba(255,255,255,.4) 1px solid;
  }
  .tips{
    color: rgba(255,255,255,.5);
  }
  .ico{
    margin-top: 60px;
    margin-bottom: 20px;
    .icon{
      font-size: 100px;
    }
  }
.swiper-pagination-bullets{
  bottom: -30px;
}
  .swiper-container{
    overflow:inherit;
  }

</style>
